<template>
  <div class="home">
    <img src="../assets/images/log.svg" alt="" />
    <div class="form border">
      <el-form
        :model="ruleForm"
        ref="ruleForms"
        status-icon
        :rules="rules"
        label-width="100px"
      >
        <h1 class="text-center">欢迎</h1>

        <el-form-item label="账户" prop="username">
          <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="handleSubmit('ruleForms')"
            >立即登录</el-button
          >
          <div class="checkbox">
            <el-checkbox v-model="checked" @change="!checked"
              >下次自动登录</el-checkbox
            >
            <router-link class="register" to="/register">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, getCurrentInstance, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { login} from "@/utils/api";
import { useStore } from "vuex";
export default {
  name: "Register",
  setup() {
    const checked = ref(false); // radio
    const store = useStore();
    const ctx = getCurrentInstance();
    const router = useRouter();
    const ruleForm = reactive({
      username: "",
      password: "",
    });
    // 校验规则
    const rules = ref({
      username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
      ],
      password: [
        { required: true, message: "请输入用户密码", trigger: "blur" },
        { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" },
      ],
    });
    // 点击登录事件
    const handleSubmit = (ruleForms) => {
      ctx.refs[ruleForms].validate((valid) => {
        if (valid) {
          login(ruleForm).then((res) => {
            // 登录成功
            if (res.data.meta.status == 200) {
              ElMessage.success({
                message: res.data.meta.msg,
                type: "success",
              });
             store.commit('setusername',ruleForm.username)
              const token = res.data.data.token;
              localStorage.setItem("token", token);
              router.push("/index");
              // 登录失败
            } else {
              ElMessage.error({
                message: res.data.meta.msg,
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    return { ruleForm, rules, checked, handleSubmit };
  },
};
</script> 

<style scoped>
.home {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.form {
  display: flex;
  justify-content: center;
  width: 700px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
form {
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin-top: 30px;
  padding-right: 50px;
}
.checkbox {
  display: flex;
  justify-content: space-between;
}
.register {
  text-decoration: none;
  color: #606266;
}
</style>